<template>
	<div>
      <!-- 面包屑导航区域 -->
	  <el-breadcrumb separator-class="el-icon-arrow-right">
	    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
	    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
	    <el-breadcrumb-item>参数列表</el-breadcrumb-item>
	  </el-breadcrumb>
	  <!--卡片视图区-->
	  <el-card>
	  	<!-- 警告区域 -->
        <el-alert show-icon title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false"></el-alert>

        <el-row class="cat_opt">
        	<el-col>
        		<span>选择商品分类：</span>
        		<!--选择商品分类区域-->
		        <el-cascader
				    v-model="selectedId"
				    :options="cateList"
				    :props="cateProps"
				    @change="handleChange" >
		        </el-cascader>
        	</el-col>
        </el-row>
        <!-- tab 页签区域 -->
        <el-tabs v-model="activeName" @tab-click="tabshandleClick">
		  <el-tab-pane label="动态参数" name="many">
		  	 <!-- 添加参数的按钮 -->
	         <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加参数</el-button>
             <el-table
		      :data="manyTableData"
		      style="width: 100%" border stripe>
		      <el-table-column type="expand">
		      	<template slot-scope="scope">
		          <el-tag v-for="(item,i) in scope.row.attr_vals" :key='i' closable @close="handleClose(i, scope.row)">{{item}}</el-tag>
		          <el-input v-if="scope.row.inputVisible" size="small" v-model="scope.row.inputValue" ref="saveTagInput" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)" class="input-new-tag"></el-input>
		          <el-button v-else size="small" @click="showInput(scope.row)">+New Tag</el-button>
		      	</template>		      	
		      </el-table-column>
		      <el-table-column type="index"></el-table-column>
		      <el-table-column prop="attr_name" label="参数名称"></el-table-column>
		      <el-table-column label="操作">
		      	<template slot-scope="scope">
		      	  <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button>
		      	</template>
		      </el-table-column>
		    </el-table>
		  </el-tab-pane>
		  <el-tab-pane label="静态参数" name="only">
		  	<!-- 添加属性的按钮 -->
	         <el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加属性</el-button>
            <el-table
		      :data="onlyTableData"
		      style="width: 100%" border stripe>
		      <el-table-column type="expand">
		      	<template slot-scope="scope">
		          <el-tag v-for="(item,i) in scope.row.attr_vals" :key='i' closable @close="handleClose(i, scope.row)">{{item}}</el-tag>
		          <el-input v-if="scope.row.inputVisible" size="small" v-model="scope.row.inputValue" ref="saveTagInput" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)" class="input-new-tag"></el-input>
		          <el-button v-else size="small" @click="showInput(scope.row)">+New Tag</el-button>
		      	</template>	
		      </el-table-column>
		      <el-table-column type="index"></el-table-column>
		      <el-table-column prop="attr_name" label="参数名称"></el-table-column>
		      <el-table-column label="操作">
		      	<template slot-scope="scope">

		      	  <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button>
		      	</template>
		      </el-table-column>
		    </el-table>
		  </el-tab-pane>
		</el-tabs>
	  </el-card>
	  <!--添加参数对话框-->
	  <el-dialog
		  :title="titleText"
		  :visible.sync="addDialogVisible"
		  width="50%"
		  @close="addDialoghandleClose">
		  <!-- 添加参数的对话框 -->
		   <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
	        <el-form-item :label="titleText" prop="attr_name">
	          <el-input v-model="addForm.attr_name"></el-input>
	        </el-form-item>
	      </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addParams">确 定</el-button>
		  </span>
	  </el-dialog>
	   <!--修改参数对话框-->
	   <el-dialog
		  :title="'修改'+titleText"
		  :visible.sync="editDialogVisible"
		  width="50%"
		  @close="editDialoghandleClose">
		  <!-- 添加参数的对话框 -->
		   <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
	        <el-form-item :label="titleText" prop="attr_name">
	          <el-input v-model="editForm.attr_name"></el-input>
	        </el-form-item>
	      </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="editParams">确 定</el-button>
		  </span>
	  </el-dialog>
	</div>
</template>
<script>
export default {
	data () {
		return {
			//商品分类列表
			cateList: [],
			// 选中的分类Id
			selectedId: [],
			cateProps: {
				value: 'cat_id',
				label: 'cat_name',
				children: 'children',
				expandTrigger: 'hover'
			},
			// activeName 被激活的页签名称 默认是many
			activeName: 'many',
			// 动态参数的数据
            manyTableData: [],
            // 静态属性的数据
            onlyTableData: [],
            // 添加参数对话框开关
            addDialogVisible: false,
            // 修改参数对话框开关
            editDialogVisible: false,
            // 添加参数的表单数据对象
            addForm: {
              attr_name: ''
            },
            // 添加表单的验证规则对象
            addFormRules: {
            	attr_name: [
                  { required: true, message: '请输入参数名称', trigger: 'blur' }
            	]
            },
            // 修改表单数据对象
            editForm: {},
            editFormRules: {
            	attr_name: [
                   { required: true, message: '请输入参数名称', trigger: 'blur'  }
            	]
            }
		}
	},
	created () {
      this.getCateList()
	},
	methods: {
      async getCateList () {
      	const { data: res } = await this.$http.get('categories')
      	if (res.meta.status !== 200) {
      		return this.$message.error('获取商品分类列表失败')
      	}
      	console.log(res.data)
      	this.cateList = res.data
      },
      //监听级联选择器 值的变化
      handleChange () {
        this.getCateParams()
      },
      // 切换tabs标签时触发的事件
      tabshandleClick () {
      	
      	this.getCateParams()
      },
      async getCateParams () {
      		//只能获取三级分类 否则不能选中
      	if(this.selectedId.length !== 3){
      		// 清空选框中的内容
      		this.selectedId = []
      		// 此处解决分选中三级分类下 参数表格仍然存在内容
      		this.manyTableData = []
      		this.onlyTableData = []
      		return
      	}
      	// 证明选中的是三级分类
      	// console.log(this.selectedId)
      	// 当级联选择器值发生改变的时候 只要获取到他的商品id
      	// 使用computed 即时监听获得cateId
        // 请求获得三级分类的动态参数或静态参数
        const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,{ params: { sel: this.activeName }})
        if (res.meta.status !== 200) {
        	return this.$message.error('获取商品参数失败')
        }
        res.data.forEach(item => {
        	item.attr_vals = item.attr_vals == ' '? [] : item.attr_vals.indexOf(',')? item.attr_vals.split(','):item.attr_vals.split(' ')
        	item.inputVisible = false
        	item.inputValue = ''
        })
        
        if (this.activeName === 'many') {
	        this.manyTableData = res.data
	      } else {
	        this.onlyTableData = res.data
	      }
      },
      //添加属性
      addParams () {
      	this.$refs.addFormRef.validate(async valid => {
      		if (!valid) return
          const { data: res } = await this.$http.post(`categories/${this.cateId}/attributes`,{
          	attr_name: this.addForm.attr_name,
          	attr_sel: this.activeName
          })
          if ( res.meta.status !== 201) {
          	return this.$message.error("添加参数失败")
          }
          this.$message.success("添加参数成功")
          this.addDialogVisible = false
          this.getCateParams()
      	})
      },
      // 添加参数对话框关闭 重置表单
      addDialoghandleClose () {
      	this.$refs.addFormRef.resetFields()
      },
      // 监听修改参数对话框打开时传入对应分类的属性id
      async showEditDialog (attrid){
      	this.editDialogVisible = true
      	// 根据属性id获取 参数名称
        const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes/${attrid}`, { params: { attr_sel: this.activeName } })
      	if (res.meta.status !== 200) {
      		return this.$message.error('获取参数信息失败！')
      	}
      	this.editForm = res.data
      },
      // 关闭对话框时重置表单
      editDialoghandleClose () {
      	this.$refs.editFormRef.resetFields()
      },
      // 更新参数名
      editParams () {
      	// 验证表单合法性
      	this.$refs.editFormRef.validate(async valid => {
      		if(!valid) return 
            const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`, { attr_name: this.editForm.attr_name, attr_sel: this.activeName, attr_name: this.editForm.attr_name, attr_sel: this.activeName })
            if (res.meta.status !== 200) {
            	return this.$message.error('更新参数失败')
            }
            this.getCateParams()
            this.$message.success('更新参数成功')
            this.editDialogVisible = false

      	})
      },
      // 删除参数
      async removeParams (attr_id) {
        const confirmResult = await this.$msgbox.confirm('此操作将永久删除该参数, 是否继续?','提示',
        	{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).catch(err => err)
        if (confirmResult !== 'confirm') {
            return this.$message.info('已取消删除！')
        }
        const { data: res } = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`)
        if (res.meta.status !== 200) {
          return this.$message.error('删除参数失败！')
        }

        this.$message.success('删除参数成功！')
        this.getCateParams()
      },
      // 将对 attr_vals 的操作，保存到数据库
     
      // 删除参数
      handleClose (i, row) {
      	row.attr_vals.splice(i,1)
      	// 成功删除tag后需要保存数据到数据库中
        this.saveAttrVals(row)
      },
      handleInputConfirm (row) {
      	// 如果什么都没有做 就回车或失去焦点
      	if(row.inputValue.trim().length === 0){
      	  row.inputVisible = false
      	  row.inputValue = ''
      	  return
      	}
      	// 证明是有内容的
      	// 做后续处理
      	  row.attr_vals.push(row.inputValue.trim())
	      row.inputValue = ''
	      row.inputVisible = false
	      // 需要发起请求，保存这次操作
	      this.saveAttrVals(row)
	  },
	  async saveAttrVals(row) {
	  	 // 需要发起请求，保存这次操作
	      const { data: res } = await this.$http.put(
	        `categories/${this.cateId}/attributes/${row.attr_id}`,
	        {
	          attr_name: row.attr_name,
	          attr_sel: row.attr_sel,
	          // 跟新的是这个
	          attr_vals: row.attr_vals.join(' ')
	        }
	      )
	      if (res.meta.status !== 200) {
            return this.$message.error('修改参数项失败！')
          }

          this.$message.success('修改参数项成功！')
	  },
	   showInput (row) {
	   	 row.inputVisible = true
	   	 // 让文本框自动获得焦点
         // $nextTick 方法的作用，就是当页面上元素被重新渲染之后，才会指定回调函数中的代码
         // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
         this.$nextTick(()=>{
         	this.$refs.saveTagInput.focus()
         })
	   }
	},
	computed: {
      cateId () {
      	if (this.selectedId.length === 3) {
      		// 返回数组中的最后一项即 三级分类的商品id
      		return this.selectedId[2]
      	}
      	return null
      },
      isBtnDisabled () {
      	// 如果级联选择器中没有选中三级分类 则禁用添加参数按钮
      	if (this.selectedId.length !== 3) {
      		return true
      	}
      	return false
      },
      titleText () {
      	if (this.activeName === 'many') {
      		return '动态参数'
      	}
      	return '静态参数'
      }
	}
}	
</script>
<style lang="less" scoped>
.cat_opt{
	margin:15px 0;
}
.el-tag{
	margin:5px 5px;
}
.input-new-tag{
	width:120px;
}
</style>